<html>
    <head>
        <meta charset="utf-8">
        <title>商户端-发布商品</title>
        <include file="Public:common_file" />
        <link rel="stylesheet" type="text/css" href="/Public/css/seller.css">
        <style type="text/css">
	        .li{
	        	margin:10px 0;
	        }
	        .body{
	        	padding:0 20px;
	        }
	        .li p{
	        	padding:0 10px; margin:0;
	        }
	         .imglist{
	        	 overflow:auto;
	        }
	        .imglist .img{
	        	width:60px; height:60px; overflow:hidden; float:left; margin:5px;
	        }
	        .imglist .img img{
	        	object-fit: cover; width:60px; height:60px;
	        }
	        .imglist .img input{
	        	width:60px; height:60px;
	        }
	        .btn{
	        	margin-top:14px;
	        }

        </style>
    </head>
    <body>
    	<div class="head">
            <div class="left" onclick="back()">&nbsp;<i class="fa fa-chevron-left" aria-hidden="true"></i>&nbsp;</div>
            <div class="center">发布商品</div>
            <div class="right">
            	<div class="btn btn-default btn-xs" onclick="add()">发布</div>
            </div>
        </div>

        <div class="clear"></div>


    	<div class="body">
    		<div class="li">
    			<p>商品名称:</p>
    			<input id="title" type="text" name="title" class="form-control" placeholder="请输入商品名称">
    		</div>
	        
	        <div class="li">
	        	<p>售卖价格:</p>
    			<input id="sale_price" type="text" name="sale_price" class="form-control" placeholder="请输入售卖价格">
	        </div>
	        <div class="li">
	        	<p>结算价格:</p>
    			<input id="real_price" type="text" name="real_price" class="form-control" placeholder="请输入结算价格">
	        </div>
	        <div class="li">
	        	<p>快递费用:</p>
    			<input id="post_fee" type="text" name="post_fee" class="form-control" placeholder="请输入快递费用">
	        </div>
	        <div class="li">
	        	<p>发货地:</p>
    			<input id="address" type="text" name="address" class="form-control" placeholder="请输入发货地">
	        </div>

	        <div class="li">
    			<p>商品介绍:</p>
	        	<textarea id="content" name="content" class="form-control" placeholder="请输入商品简介" rows="5"></textarea>
	        </div>

	        <div class="li">
    			<p>商品图片:</p>
	        	<div class="imglist">
	        		<div class="img">
		    			<img src="/Public/img/add.png" style="position:absolute;height:60px;width:60px;">
		    			<input id="img" type="file" name="img" style="position:absolute;z-index: 3;opacity:0;">
		    		</div>
	        	</div>
	        </div>
	    </div>
    </body>

    <script type="text/javascript" src="/Public/js/lrz.mobile.min.js"></script>
	<script type="text/javascript">
        var input = document.querySelector('#img');
        var res;
        var imgnum = 0;

		input.onchange = function () {
			if (imgnum>9) {
				alert('最多上传9张图');
			}else{
				hover_in('正在上传...');
				lrz(this.files[0], {width: 640},function (results) {
					setTimeout('img()',2000);
					res = results;
					imgnum ++;
					console.log(results); 
				});
			}
			


		}

		function img(){
			var html = 
			'<div class="img">'+
				'<img src="'+res.base64+'">'+
			'</div>';
			$('.imglist').append(html);
			hover_out();
		}

		function add(){
			var title = $('#title').val();
			var sale_price = $('#sale_price').val();
			var real_price = $('#real_price').val();
			var post_fee = $('#post_fee').val();
			var address = $('#address').val();
			var content = $('#content').val();

			if (title == "") {
				alert("请输入商品名称！");
			}else if (sale_price == "") {
				alert("请输入销售价格！");
			}else if (real_price == "") {
				alert("请输入结算价格！");
			}else if (post_fee == "") {
				alert("请输入邮费！");
			}else if (address == "") {
				alert("请输入发货地址！");
			}else if (content == "") {
				alert("请输入商品简介！");
			}
		}
	</script>


</html>